<template>
  <div class="w-full h-full p-4 flex justify-items-center justify-center items-center">
    <div class="flex flex-col gap-y-4 rad3d-container">
      <div class="btn-grad1 anim-btn">Hover me</div>
      <div class="btn-grad2 anim-btn">Hover me</div>
      <div class="btn-grad3 anim-btn">Hover me</div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
$ease: ease-in;

$dealy: 4/4;

.rad3d-container {
  perspective: 100px;
}

.anim-btn {
  perspective: 500px;
  transform-style: preserve-3d;
  position: absolute;
  width: 180px;
  left: -90px;
  // backface-visibility: hidden;

  &:nth-child(1) {
    transform: translate3d(0px, 0px, 0px);
    animation: d3rotate 4s infinite running ease-in;
  }

  &:nth-child(2) {
    transform: translate3d(0px, 0px, 0px);
    animation: d3rotate 4s -1.3s infinite running $ease;
  }
  &:nth-child(3) {
    transform: translate3d(0px, 0px, 0px);
    animation: d3rotate 4s -2.6s infinite running $ease;
  }
}

@keyframes d3rotate {
  0% {
    transform: translate3d(0px, 0px, 0px);
    z-index: 10;
  }

  30% {
    transform: translate3d(0px, -100px, -100px);
    z-index: 10;
  }

  33% {
    transform: translate3d(0px, -100px, -100px);
    z-index: 9;
  }

  63% {
    transform: translate3d(0px, 100px, -100px);
    z-index: 9;
  }
  66% {
    transform: translate3d(0px, 100px, -100px);
    z-index: 9;
  }

  97% {
    transform: translate3d(0px, 0px, 0px) rotateY(10deg);
    z-index: 10;
  }

  98% {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg);
    z-index: 10;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) rotateY(-10deg);
    z-index: 10;
  }
}

.btn-grad1 {
  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
}
.btn-grad1 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad1:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad2 {
  background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%);
}
.btn-grad2 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad2:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad3 {
  background-image: linear-gradient(to right, #ede574 0%, #e1f5c4 51%, #ede574 100%);
}
.btn-grad3 {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad3:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
</style>
